<template>
    <div>
        <div>
            <el-dialog class="nyDialog" :visible.sync="is_dialog_show" width="60%" :close-on-click-modal="false"
                :before-close="() => { this.close(); }">
                <div class="overflow-hidden w-full h-full flex flex-col items-center" style="border-radius:4px;">
                    <div class="w-full h-w48 flex items-center px-w20 justify-between bg-caux text-white">
                        <div class="text-f14">模板详情</div>
                        <i class="el-icon-circle-close   cursor-pointer" @click.stop="close()"></i>
                    </div>
                    <div class="w-full flex justify-center">
                        <div class="flex flex-col w-w6/12  " v-if="type == 1">
                            <div class=" px-w10 py-w3 border border-ce rounded-sm  leading-w40 text-f16 text-c3 mt-w20 cursor-pointer"
                                v-for="(item, index) in s_inves.list_base_info" :key="index">{{ item.name }}</div>
                        </div>
                        <div class="flex flex-col w-w10/12" v-else>
                            <div class="flex items-center justify-between px-w10 py-w3 border border-ce rounded-sm  leading-w40 text-f16 text-c3 mt-w20 cursor-pointer"
                                v-for="(item, index) in s_inves.list_inv_question" :key="index">
                              <div>{{ item.name }}</div>
                              <div class="flex items-center">
                                <div class="whitespace-nowrap">{{"【"+index+"】"}}</div>
                                <img
                                  class="w-w20 h-w20 cursor-pointer"
                                  src="@/assets/image/icon_data_down_normal.png"
                                  alt="下移"
                                  srcset=""
                                  @click="action_move_down(index)"
                                />
                                <img
                                    class="w-w20 h-w20 cursor-pointer"
                                    src="@/assets/image/icon_data_up_normal.png"
                                    alt="上移"
                                    srcset=""
                                    @click="action_move_up(index)"
                                /></div>

                            </div>
                        </div>
                    </div>
                    <div class="w-full flex flex-row justify-center mt-w30 mb-w30">
                        <el-button class=" w-w1/5 bg-cmain_hover" type="primary" @click="close">关闭</el-button>
                    </div>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script lang="ts">
import DZServiceInves from "@/views/问卷管理/service/DZServiceInves";
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import nyNetwork from "@/api/nyBaseNetwork";
import DZModelQuesiton from "@/views/问卷管理/model/DZModelQuesiton";

@Component
export default class UiDialogTemplateInfo extends Vue {

    @Prop() is_showDialog;

    @Prop() data;

    @Prop() type;

    @Prop() template_id;

    is_dialog_show = false;

    m_data = '';

    s_inves = new DZServiceInves();


    created() {
    }

    mounted() {
    }

    beforeDestroy() { }

    close() {
        this.$emit('nydialog_closed', '');
        this.initDialog();
    }
    initDialog() {
        this.m_data = '';
        this.is_dialog_show = false;
    }

    @Watch("is_showDialog")
    watchShowDialog(value: any, oldValue: string) {
        this.is_dialog_show = value;
    }

    @Watch("data")
    watchData(value: any, oldValue: string) {
        if (value) {
            this.m_data = value;
            if (this.type == 1) {
                this.s_inves.net_info_template_base(this.m_data);
            } else {
                this.s_inves.net_info_template_question(this.m_data);
            }
        } else {
            this.m_data = "";
        }
    }

    actionSubmit() {
        this.$emit('nydialog_submit', this.m_data);
        this.close();
    }

    action_move_down(index){
      let arr = []
      this.s_inves.list_inv_question.forEach(obj =>{
        arr.push(obj.id)
      })
      let len = arr.length
      if(index >= len){
        return
      }
      const temp = arr[index]
      arr[index] = arr[index + 1]
      arr[index + 1] = temp
      this.action_move_net(arr.join(","))
    }

    action_move_up(index){
      let arr = []
      this.s_inves.list_inv_question.forEach(obj =>{
        arr.push(obj.id)
      })
      if(index == 0){
        return
      }
      const temp = arr[index]
      arr[index] = arr[index - 1]
      arr[index - 1] = temp
      this.action_move_net(arr.join(","))
    }

    action_move_top(){

    }

    action_cancel_top(){

    }

    action_move_net(str){
      this.s_inves.net_list_question_move(str,this.template_id,this.action_get_list)
    }

    action_get_list(){
      nyNetwork.net("问卷问题模板详情", { templateId: this.template_id }, data => {
        var arr_data = []
        for (const item of data) {
          var baseInfo = new DZModelQuesiton();
          baseInfo.id = item.iId ?? '';
          baseInfo.name = item.sName ?? '';
          baseInfo.inputType = parseInt(item.iInputType) ?? 0;
          baseInfo.selectContent = item.sSelectContent ?? '';
          if (item.sSelectContent) {
            baseInfo.contentList = item.sSelectContent.split(",");
          }
          arr_data.push(baseInfo);
        }
        this.s_inves.list_inv_question = arr_data;
      })
    }


}
</script>
<style lang="less" scoped>
/deep/ .el-dialog {
    border-radius: 4px !important;
    border: none;
}

/deep/.el-dialog__body {
    text-align: left;
    // min-height: 22vw;
    padding: 0px;
}

/deep/ .dialog-tips {
    margin-top: 0 !important;
}

/deep/ .el-dialog__footer {
    text-align: right;
}

/deep/.el-dialog__header {
    height: 0px;
    padding: 0;
}

/deep/ .el-icon-close:before {
    content: '';
}

.nyDialog {
    background: none;
}
</style>
